<template>
  <view class="page">
    <view v-if="List.length == 0" class="nodata">
      <image
        class="img_nodata"
        src="https://ainengli.meilianshuke.com/jkhx/patient/no-follow-data.png"
      />
      <view class="nodata_text">暂无关注</view>
    </view>
    <view v-else class="body">
      <my-list
        class="list"
        :pageInfo="pageInfo"
        @onLoadmore="onLoadmore"
        @onReload="getList"
        :refresherEnabled="true"
        @onReset="onReset"
        EmptyText="暂无数据"
      >
        <view class="item" v-for="(item, i) in List" :key="i" @tap="toDetail(item)">
          <img v-if="item.avatar" class="avatar-img" :src="item.avatar" alt="" />
          <img v-else-if="item.gender == 2" class="avatar-img" src="https://ainengli.meilianshuke.com/jkhx/raozg/doctor-female.png" alt="" />
          <img v-else class="avatar-img" src="https://ainengli.meilianshuke.com/jkhx/raozg/doctor-male.png" alt="" />
          <view class="doctor-info">
            <view class="item-top">
              <text class="name">{{ item.name }}</text>
              <text style="margin-left: 20rpx">{{ item.titleName }}</text>
            </view>
            <view class="item-bottom">
              <text class="item-bottom-hospital">{{ item.hospitalName }}</text>
              <text class="item-bottom-department" style="margin-left: 20rpx">{{ item.departmentName }}</text>
            </view>
          </view>
        </view>
      </my-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, getCurrentInstance } from "vue";
import MyList from "./MyList/MyList.vue";
import { getFollowList } from "./follows.api";
import { onShow, onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";

const { proxy }: any = getCurrentInstance();

const List = ref([]);
const pageInfo = ref({
  page: 1,
  limit: 10,
  scroll: false,
  status: "nomore",
  triggered: false,
});

onShow(() => {
  getList();
});

const onLoadmore = () => {
  const pageinfo = pageInfo.value;

  if (pageinfo["scroll"]) {
    pageinfo.page++;
    getList();
  }
};

const onReset = () => {
  const pageinfo = pageInfo.value;
  pageinfo["triggered"] = true;
  pageinfo["status"] = "loading";
  pageinfo["scroll"] = false;
  // List.value = [];
  pageinfo["page"] = 1;
  setTimeout(() => {
    getList();
  }, 1000);
};

const getList = () => {
  const pageinfo = pageInfo.value;

  pageinfo["status"] = "loading";
  pageinfo["scroll"] = false;

  getFollowList()
    .then((res) => {
      if (res) {
        const list = res.records;
        list.forEach((val) => {
          val.time = val.createTime
            ? dayjs(new Date(val.createTime)).format("YYYY-MM-DD hh:mm")
            : "";
        });
        if (list.length < pageinfo["limit"]) {
          pageinfo["scroll"] = false;
          if (list.length === 0) {
            pageinfo["status"] = "nodata";
            List.value = [];
          } else {
            pageinfo["status"] = "";
            List.value = [...list];
          }
        } else {
          pageinfo["scroll"] = true;
          pageinfo["status"] = "loadmore";
          List.value = [...list];
        }
      } else {
        pageinfo["status"] = "error";
      }
      // console.log("列表数据", List.value, res);
    })
    .catch((e) => {
      pageinfo["status"] = "error";
    })
    .finally((e) => {
      if (pageinfo["triggered"]) {
        pageinfo["triggered"] = false;
      }
      console.log(pageinfo);
    });
};

const toDetail = (item: any) => {
  proxy.utils.uni.route.go(
    "/pages/myFollows/detail?doctorId=" + item.doctorUserId
  );
};
</script>

<style lang="scss" scoped>
.nodata {
  text-align: center;

  .img_nodata {
    width: 320rpx;
    height: 240rpx;
    margin-top: 540rpx;
  }

  .nodata_text {
    font-size: 28rpx;
    font-weight: 400;
    color: #666;
  }
}

.body {
  height: 100vh;
  padding: 0 32rpx;
  background: #f5f7fa;

  .item {
    padding: 32rpx;
    margin-top: 24rpx;
    background: #fff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    gap: 24rpx;
    justify-content: flex-start;
    .avatar-img {
      width: 92rpx;
      height: 92rpx;
      border-radius: 50%;
      border: 1rpx solid #e5e6eb;
    }
    .doctor-info {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
    }
    .item-top .name {
      font-weight: 700;
      font-size: 32rpx;
      color: #222222;
    }
    .item-bottom {
      margin-top: 16rpx;
      .item-bottom-hospital, .item-bottom-department {
        max-width: 280rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .item-bottom-department {
        max-width: 210rpx;
      }
    }
  }
}
</style>
